<template>
	<view class="a">
		<view class="b">
			<view class="bl">
				售后编号: SH201704251144926
			</view>
			<view class="br">
				退款中
			</view>
		</view>
		<view class="c">
			<!-- 左边图片 -->
			<view class="body-middle-left">
				<image src="../../static/dingdan_imgs/goods.png" mode=""></image>
			</view>
			<!-- 右边介绍 -->
			<view class="body-middle-right">
				<!-- 商品名 -->
				<view class="body-middle-right-name">商品名商品名商品名商品名商品名商品名商品名商品名</view>
				<view class="body-middle-right-price">
					<view class="body-middle-right-price1">￥188.9</view>
					<view class="body-middle-right-price2">×1</view>
				</view>
			</view>
		</view>
		<view class="d">
			<view class="dr">
				查看详情
			</view>
		</view>
		<view class="e">
		</view>
		<view class="b">
			<view class="bl">
				售后编号: SH201704251144926
			</view>
			<view class="br">
				退款中
			</view>
		</view>
		<view class="c">
			<!-- 左边图片 -->
			<view class="body-middle-left">
				<image src="../../static/dingdan_imgs/goods.png" mode=""></image>
			</view>
			<!-- 右边介绍 -->
			<view class="body-middle-right">
				<!-- 商品名 -->
				<view class="body-middle-right-name">商品名商品名商品名商品名商品名商品名商品名商品名</view>
				<view class="body-middle-right-price">
					<view class="body-middle-right-price1">￥188.9</view>
					<view class="body-middle-right-price2">×1</view>
				</view>
			</view>
		</view>
		<view class="d">
			<view class="dr">
				查看详情
			</view>
		</view>
		<view class="e">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.a{
		/* background-color: gainsboro; */
	}
	.b{
		height: 88rpx;
		font-size:30rpx;
		line-height: 88rpx;
		display: flex;
		/* justify-content: ; */
	}
	.bl{
		position: absolute;
		left: 20rpx;
	}
	.br{
		position: absolute;
		right: 20rpx;
	}
	.c {
		display: flex;
		padding-left: 20rpx;
		background-color: #dcdcdc4a;
		height: 200rpx;
		/* position: relative; */
	}
	.d{
		height: 88rpx;
		font-size:35rpx;
		position: relative;
	}
	.dr{
		top: 10rpx;
		width: 148rpx;
		height: 60rpx;
		border: 2rpx gainsboro solid;
		border-radius: 30rpx;
		line-height: 60rpx;
		text-align: center;
		position: absolute;
		right: 20rpx;
	}
	.e{
		height: 10rpx;
		background-color: gainsboro;
	}
	.body-middle-left image {
		margin-right: 5vw;
		width: 20vw;
		height: 20vw;
		/* position: absolute; */
		margin-top: 20rpx;
	}

	.body-middle-right-name {
		width: 70vw;
		height: 10vw;
		margin-top: 20rpx;
	}

	.body-middle-right-price {
		width: 70vw;
		height: 10vw;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.body-middle-right-price1 {
		font-size: 4vw;
		font-weight: 700;
	}

	.body-middle-right-price2 {
		margin: 0 2vw 0 0;
	}

	.button {
		display: flex;
		justify-content: flex-end;
		font-size: 3vw;
	}

	.button1 {
		margin: 1vw 2vw 2vw 1vw;
		border-radius: 10px;
		padding: 1vw 1vw 1vw 1vw;
		border: 1px solid #00000060;
	}

	.button2 {
		margin: 1vw 2vw 2vw 1vw;
		border-radius: 10px;
		padding: 1vw 1vw 1vw 1vw;
		color: #fff;
		border: 1px solid #00000060;
		background-color: #00000060;
	}
</style>
